## 自定义组件扩展

其实自定义组是vue中基础的基础，也无需过多地说明。官方文档永远是最好的教程。
vue很简单也很方便，几乎一二天就能上手。其他的react,angular本身也不难上手。<!--毕竟框架是为开发服务的，说难的，不好用的，可能你水准不够，你懒，或者与你理念不合。-->
同Vue为前端最热门的三个框架。React颠覆了前端开发的理念，显得独树一帜;而Angular在构建大型web应用时具有明显的优势。而Vue体积小，上手容易，具有卓越的性能。

这里是官方[vue组件](https://vuefe.cn/v2/guide/components.html)的定义方法。可能的话写[单文件组件](https://vuefe.cn/v2/guide/single-file-components.html)是更好的办法。
下面简单定义一个组件。

比如我们要创建圆角的图片，标签名为radiusimage，有两个属性`src`和`radius`，分别定义图片的地址和图片的圆角半径。

### 示例
<radiusimage :src="'http://pixiv-zingaro.jp/wp-content/banner/112/small.jpg'" :radius="10"></radiusimage>
<radiusimage :src="'http://pixiv-zingaro.jp/wp-content/banner/111/small.jpg'" :radius="20"></radiusimage>

### 示例的代码
<v-code :templateid="'code1'">
</v-code>

### 定义组件的代码
<v-code :templateid="'code'">
</v-code>


<script type="x-template" id="code">
Vue.component('radiusimage',{
	template:'<img :src="src" :style="sty" />',
	props:{
		src:{
			type:String,
			default:''
		},
		radius:{
			type:Number,
			default:0
		}
	},
	data:function(){
		return {
			sty:{
				borderRadius:this.radius+'px',
			}
		}
	}
})
</script>

<script type="x-template" id="code1">
<radiusimage :src="'http://pixiv-zingaro.jp/wp-content/banner/112/small.jpg'" :radius="10"></radiusimage>
<radiusimage :src="'http://pixiv-zingaro.jp/wp-content/banner/111/small.jpg'" :radius="20"></radiusimage>
</script>
